<template>
  <div class="set-dir">
    <Tree :data="dirArray" :render="renderContent" class="dir-tree"></Tree>
    <pre>
      {{content}}
    </pre>
  </div>
</template>

<script>

export default {
  name: 'SetDir',
  data () {
    return {
      dirArray:[],
      fileInfo:"",
    }
  },
  mounted () {
    this.getDirArr();
  },
  computed:{
    content:function(){
      return this.fileInfo.content||null;
    }
  },
  methods:{
    getDirArr:function(){
      this.$http.get('/dir')
      .then((response)=>{
        this.dirArray=response.data;
      });
    },
    renderContent:function(h, { root, node, data }){
      return h('span',[
        h('Icon', {
          props: {
            type: data.type=='file'?'clipboard ':'folder '
          },
        }),
        h('span',{
          on:{
            click:()=>this.openFile(data.url,data.type),
          }
        } ,data.title),
      ]);
    },
    openFile:function(url,type){
      if(type=='file'){
        this.$http.get('/dir/getFileInfo?url='+url)
        .then((response)=>{
          this.fileInfo=response.data;
        });
      }
    }
  }
}  
</script>
<style>
.dir-tree{
  font-size: 20px;
}
</style>
